<template>
  <div>
    <div class="button--search-content">
      <!-- 搜索框 -->
      <a-input-search
        placeholder="请输入用户名"
        style="width: 300px; margin-bottom: 16px;"
        v-model="searchText"
        @search="onSearch"
      />

      <!-- 按钮 -->
      <div>
        <a-button type="primary" @click="addUser">添加</a-button>
        <a-button type="default" @click="batchDelete">批量删除</a-button>
        <a-button type="default" @click="importData">导入</a-button>
        <a-button type="default" @click="exportData">导出</a-button>
      </div>
    </div>

    <!-- 表格 -->
    <a-table
      bordered
      :columns="columns"
      :dataSource="dataSource"
      rowKey="userId"
      :pagination="false"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <template slot="action" slot-scope="text, record">
        <a-button type="link" @click="editRecord(record)">编辑</a-button>
      </template>
    </a-table>
    <div class="pagination-wrapper">
      <a-pagination v-model="current" :total="50" show-less-items :pageSize="pageSize" @change="paginationChange" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      dataSource: [
        {
          userId: '213123',
          userName: '李彦宏',
          position: '董事长',
          level: 'M-25',
          organization: '集团公司',
          tenure: '2022-2030',
          responsibility: '管理者'
        }
        // 其他数据行
      ],
      columns: [
        {
          title: '用户编号',
          dataIndex: 'userId',
          key: 'userId',
          align: 'center'
        },
        {
          title: '用户名',
          dataIndex: 'userName',
          key: 'userName',
          align: 'center'
        },
        {
          title: '职位',
          dataIndex: 'position',
          key: 'position',
          align: 'center'
        },
        {
          title: '职级',
          dataIndex: 'level',
          key: 'level',
          align: 'center'
        },
        {
          title: '组织架构',
          dataIndex: 'organization',
          key: 'organization',
          align: 'center'
        },
        {
          title: '任期',
          dataIndex: 'tenure',
          key: 'tenure',
          align: 'center'
        },
        {
          title: '职责分工',
          dataIndex: 'responsibility',
          key: 'responsibility',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      selectedRowKeys: [],
      current: 1,
      pageSize: 10
    }
  },
  methods: {
    onSearch(value) {
      this.searchText = value
    },
    addUser() {
      // 添加用户的逻辑
    },
    batchDelete() {
      if(!this.selectedRowKeys.length) return this.$message.error('最少选择一项')
      // 批量删除的逻辑
    },
    importData() {
      // 导入数据的逻辑
    },
    exportData() {
      // 导出数据的逻辑
    },
    editRecord(record) {
      // 编辑的逻辑
      console.log('Edit record', record)
    },
    // 选择了表格的数据
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    // 分页
    paginationChange(page) {
      this.current = page
    }
  }
}
</script>

<style scoped lang="less">
.button--search-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .ant-btn {
    margin-left: 10px;
  }
}
.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>

